<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../../jquery-easyui-1.3.6/themes/default/easyui.css" type="text/css"></link>
	<link rel="stylesheet" href="../../css/icons/icon.css" type="text/css"></link>
	<link rel="stylesheet" type="text/css" href="../demo.css"></link>
	<script type="text/javascript" src="../../jquery-easyui-1.3.6/jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../jquery-easyui-1.3.6/locale/easyui-lang-zh_CN.js"
	charset="utf-8"></script>
	<script type="text/javascript" src="../../Exteasyui/datetimebox.js"></script>
	<script type="text/javascript" src="../../Exteasyui/onCollapse.js"></script>
	
	<script type="text/javascript" charset="utf-8">
	var datagrid;
	var editRow = undefined;//行编辑标志
	var areas = [
		    {areaid:'NINGBO',name:'宁波'},
		    {areaid:'HANGZHOU',name:'杭州'},
		    {areaid:'WENZHOU',name:'温州'},
		    {areaid:'ZHOUSHAN',name:'舟山'},
		    {areaid:'TAIZHOU',name:'台州'},
		    {areaid:'YUYAO',name:'余姚'},
		    {areaid:'SHAOXING',name:'绍兴'}
		];
	$(function() {
		datagrid = $('#datagrid').datagrid({
			url : 'client.json',
			title : '',
			iconCls : 'icon-save',
			pagination : true,//进度条
			pageSize : 10,//每页显示10条
			pageList : [ 10, 20, 30, 40, 50 ],//选择每页显示条数
			fit : true,
			fitColumns : true,//设置false页面变窄时显示横向滚动条
			nowrap : false,//表格内容自动折行
			border : false,
			idField : 'id',//翻页选择标记（便于多页删除）
			sortName : 'client_code',
			//sortOrder : 'desc',
			remoteSort: false,
			columns : [ [ {
				title : '编号',
				field : 'id',
				width : 100,
				sortable:true,
				checkbox:true,
				
			}, {
				title : '客户代码',
				field : 'client_code',
				width : 100,
				sortable : true,
				editor : {
					type : 'validatebox',
					options : {
						required : true
					}
				}
			}, {
				title : '客户名称',
				field : 'client_name',
				width : 100,
				sortable : true,
				editor : {
					type : 'validatebox',
					options : {
						required : true
					}
				}
			}, {
				title : '所属地区',
				field : 'areaid',
				width : 100,
				sortable : true,
				formatter:function(value){
							for(var i=0; i<areas.length; i++){
								if (areas[i].areaid == value) return areas[i].name;
							}
							return value;
						},
				editor:{
							type:'combobox',
							options:{
								valueField:'areaid',
								textField:'name',
								data:areas,
								required:true
							}
						}
			},  {
				title : '联系电话',
				field : 'client_tel',
				width : 100,
				editor : {
					type : 'numberbox',
					options : {
						required : {type:'numberbox',options:{precision:0}}
					}
				}
			}, {
				title : '联系地址',
				field : 'client_addr',
				width : 100,
				editor : {
					type : 'text',
					options : {
						required : true
					}
				}
			}, {
				title : '车队负责人',
				field : 'charge',
				width : 100,
				sortable : true,
				editor : {
					type : 'combobox',
					options : {
						required : true
					}
				}
			} ] ],//合并单元格
			toolbar : [ {
				text : '增加',
				iconCls : 'icon-add',
				handler : function() {
					if (editRow != undefined) {
						datagrid.datagrid('endEdit', editRow);
					}
					//datagrid.datagrid('appendRow', {//末尾增加

					//});
					//if (editRow == undefined) {
						datagrid.datagrid('insertRow', {//首行增加

							index : 0,
							row : {
								

							}

						});
						var rows = datagrid.datagrid('getRows');
						//datagrid.datagrid('beginEdit', rows.length - 1);//开启行编辑模式，在末尾插入index索引从零开始，因此减1
						datagrid.datagrid('beginEdit', 0);
						editRow = 0;
					//}
				}

			}, '-', {
				text : '删除',
				iconCls : 'icon-remove',
				handler : function() {
				var rows = datagrid.datagrid('getSelections');//获得选中项
				if(rows.length>0){
				$.messager.confirm('请确认','您确定要删除当前选择的所有项吗？',function(b){
				if(b){
				var ids=[];
				for(i=0;i<rows.length;i++){
				ids.push(rows[i].id);
				}
				$.ajax({
                url : '${pageContext.request.contextPath}/userAction!remove.action',
                data : {ids : ids.join(',')},
                dataType : 'json',
                success : function(r) {
                    $('#datagrid').datagrid('load');
                    $('#datagrid').datagrid('unselectAll');
                        $.messager.show({
                         title : '提示',
                        msg : r.msg
                        });
                }
                });
				}
				});
				console.info(rows)
				}else{
				$.messager.alert('提示','请选择要删除的记录','error');
				}
				}
			}, '-', {
				text : '修改',
				iconCls : 'icon-edit',
				handler : function() {
					var rows = datagrid.datagrid('getSelections');
					if (rows.length == 1) {
						if (editRow != undefined) {
							datagrid.datagrid('endEdit', editRow);
						}
						if (editRow == undefined) {    
							var index =datagrid.datagrid('getRowIndex', rows[0]);
							datagrid.datagrid('beginEdit', index);
							editRow = index;
							datagrid.datagrid('unselectAll');
						}
					}
				}
			}, '-', {
				text : '保存',
				iconCls : 'icon-save',
				handler : function() {
				    endEdit();
					if (datagrid.datagrid('getChanges').length) {
                        var inserted = datagrid.datagrid('getChanges', "inserted");
                        var deleted = datagrid.datagrid('getChanges', "deleted");
                        var updated = datagrid.datagrid('getChanges', "updated");
                        var effectRow = new Object();
                            if (inserted.length) {
                            effectRow["inserted"] = JSON.stringify(inserted);
                            }
                            if (deleted.length) {
                            effectRow["deleted"] = JSON.stringify(deleted);
                            }
                            if (updated.length) {
                            effectRow["updated"] = JSON.stringify(updated);
                            }
                         $.post("${pageContext.request.contextPath}/test/list/commit.do", effectRow, function(rsp) {
                            if(rsp.status){
                            $.messager.alert("提示", "提交成功！");
                            datagrid.datagrid('acceptChanges');
                            }
                         }, "JSON").error(function() {
                            $.messager.alert("提示", "提交错误了！");
                         });
				    }
			    }
				}, '-', {
				text : '取消',
				iconCls : 'icon-redo',
				handler : function() {
					editRow = undefined;
					datagrid.datagrid('rejectChanges');
					//datagrid.datagrid('unselectAll');
				}
			}, '-' ],
			onAfterEdit : function(rowIndex, rowData, changes) {
				console.info(rowData);//向后台传递的数据
				editRow = undefined;
			},
			onDblClickRow : function(rowIndex, rowData) {//双击编辑行
				if (editRow != undefined) {
					datagrid.datagrid('endEdit', editRow);
				}
				if (editRow == undefined) {

					var rows = datagrid.datagrid('getRows');
					datagrid.datagrid('beginEdit', rowIndex);
					editRow = rowIndex;
				}
			}
		});
		      function endEdit(){
                var rows = datagrid.datagrid('getRows');
                for ( var i = 0; i < rows.length; i++) {
                 datagrid.datagrid('endEdit', i);
                }
               }
	});
</script>

	
</head>
<body>
	<div class="easyui-layout" fit="true" border="false")>
	<div region="north" data-options="border:false,title:'查询',iconCls:'icon-search'"
		style="height:85px;overflow:hidden;">
		<form id="client_name">
			<table class="tableForm datagrid-toolbar"
				style="width:100%;height:100%;">
				<tr>
					<th>客户名称</th>
					<td><input name="client_name" style="width:100px;" /></td>
				</tr>
				<tr>
					<th>所属地区</th>
					<td><select class="easyui-combobox" panelHeight="auto" style="width:110px">
					       <option value="全部">全部</option>
				           <option value="宁波">宁波</option>
				           <option value="杭州">杭州</option>
				           <option value="温州">温州</option>
			        </select>
					<a
						href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search"
						onclick="cd.user.search();">查询</a> <a href="javascript:void(0);"
						class="easyui-linkbutton" iconCls="icon-undo" onclick="cd.user.clear();">清空</a></td>
				</tr>
			</table>
		</form>
	</div>
	<div region="center" title="客户信息" border="false">
		<table id="datagrid"></table>
	</div>
</div>
	
</body>
</html>